<html xmlns="http://www.w3.org/1999/xhtml">
  
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <title>Simple Python Image Sequencer</title>
  <script src="/dlr/dlr.js" type="text/javascript"></script>
</head>

<body>

  <script type="text/python" class="sequ">
    from System import * # for Uri
    from System.Windows.Shapes import * # exposes Rectangle to scope since not added by default
    from System.Windows.Media.Imaging import * # for bitmap
    from System.Windows.Controls import *
    from System.Windows.Media import *
    from System.Diagnostics import * # enables outputing to a debug window!
    from Microsoft.Scripting.Silverlight.DynamicApplication import MakeUri

    grid = me.grid
    layoutRoot = me.LayoutRoot
    bkg = me.bkg
    frame = me.frame
    holder = me.holder

    totalImages = 37
    imageWidth = 150
    startAngle = 0
    isDrag = False
    pointer = 0
    calcPointer = 0

    def bkg_MouseLeftButtonDown(sender, e):
        global isDrag # if referencing a global variable, it must be explicity stated
        x = e.GetPosition(layoutRoot).X - 300
        y = -1 * (e.GetPosition(layoutRoot).Y - 150)
        startAngle = Math.Atan2(y, x) / (Math.PI / 180)
        if (startAngle < 0):
            startAngle += 360
        if (startAngle > 360):
            startAngle = (startAngle % 360)
        isDrag = True
        bkg.CaptureMouse()

    def bkg_MouseLeftButtonUp(sender, e):
        global isDrag
        isDrag = False
        bkg.ReleaseMouseCapture()
        pointer = calcPointer

    def bkg_MouseMove(sender, e):
        global isDrag
        if (isDrag == False):
            return
        mouse = e.GetPosition(layoutRoot)
        _x = mouse.X - 300
        _y = -1 * (mouse.Y - 150)
        targetAngle = Math.Atan2(_y, _x) / (Math.PI / 180)
        if (targetAngle < 0):
            targetAngle += 360
        if (targetAngle > 360):
            targetAngle = (targetAngle % 360)
        delta = targetAngle - startAngle
        frameOffset = Math.Floor((delta / 360) * totalImages)
        calcPointer = pointer + frameOffset
        if (calcPointer < 0):
            calcPointer += totalImages
        if (calcPointer >= totalImages): 
            calcPointer -= totalImages
        holder.SetValue(Canvas.LeftProperty, calcPointer * -imageWidth)

    bkg.MouseLeftButtonDown += bkg_MouseLeftButtonDown
    bkg.MouseLeftButtonUp += bkg_MouseLeftButtonUp
    bkg.MouseMove += bkg_MouseMove

    # load images
    for i in range(0, totalImages):
        # this path might seem odd because the images need to be found relative
        # to the /gs directory. Alternately you could specify a fully qualified path to images
        imageName = "images/redGlobe_" + i.ToString() + ".png"
        img = Image()
        img.Source = BitmapImage(MakeUri(imageName))
        img.SetValue(Canvas.LeftProperty, Convert.ToDouble(i * imageWidth))
        holder.Children.Add(img)
  </script>

  <script id="sequ" type="application/xml+xaml" width="600" height="300">
    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  x:Name="grid" Width="600" Height="300" Background="Tan">
        <Canvas x:Name="LayoutRoot">
            <Canvas.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#000000" Offset="0.4"></GradientStop>
                    <GradientStop Color="#FF0000" Offset="1.0"></GradientStop>
                </LinearGradientBrush>
            </Canvas.Background>
            <Ellipse x:Name="bkg" Width="260" Height="260" Canvas.Left="170" Canvas.Top="20" Cursor="Hand">
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#00FF0000" Offset=".6"></GradientStop>
                        <GradientStop Color="#66FF0000" Offset="1.0"></GradientStop>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Canvas x:Name="frame" Width="150" Height="140" Canvas.Left="225" Canvas.Top="80" IsHitTestVisible="False">
                <Canvas.Clip>
                    <RectangleGeometry Rect="0,0,150,140"></RectangleGeometry>
                </Canvas.Clip>
                <Canvas x:Name="holder"></Canvas>
            </Canvas>
        </Canvas>
    </Grid>
  </script>
    
</body>
</html>
